<template>
    <div class="common-layout">

        <el-row>
            <el-col :span="8">
                <el-select v-model="state.selected" class="m-2" placeholder="行业" 
                filterable
                @change="change"
                size="large">
                    <el-option v-for="item in state.industryTags" :key="item" :label="item" :value="item" />
                </el-select>

                <el-text> 数量：{{ state.data.length }} </el-text>

            </el-col>
        </el-row>

        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        @cell-click="industryClick"
        :default-sort="state.sort"
        style="width: 100%">
            <el-table-column prop="stock" label="股票" width="150">
                <template #default="scope">
                    <ToStockDetail :stock="scope.row.stock" />
                </template> 
            </el-table-column>
            <el-table-column prop="industry" label="行业" sortable width="150"/>
            <el-table-column prop="rankNow" label="吾股最新" sortable width="100"/>
            <el-table-column prop="increased" label="吾股变化" sortable width="100"/>
            <el-table-column prop="rank2024" label="2024" sortable width="100"/>
            <el-table-column prop="rank2023" label="2023" sortable width="100"/>
            <el-table-column prop="rank2022" label="2022" sortable width="100"/>
            <el-table-column prop="rank2021" label="2021" sortable width="100"/>
            <el-table-column prop="rank2020" label="2020" sortable width="100"/>
            <el-table-column prop="rank2019" label="2019" sortable width="100"/>
            <el-table-column prop="rank2018" label="2018" sortable width="100"/>
            <el-table-column prop="rank2017" label="2017" sortable width="100"/>
            <el-table-column prop="rank2016" label="2016" sortable width="100"/>
            <el-table-column prop="let10Count" label="前10名统计" sortable width="100"/>
            <el-table-column prop="let100Count" label="前100名统计" sortable width="100"/>
            <el-table-column prop="let300Count" label="前300名统计" sortable width="100"/>
            <el-table-column prop="get1000Count" label="大于1000名统计" sortable width="100"/>
        </el-table>
    </div>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { getWuguHistoryData } from '../service/wugu'
import ToStockDetail from './ToStockDetail.vue';
import { getSessionStorage, getWuguClassName, setSessionStorage } from '../utils/help';
import { useRouteQuery } from '../utils/useRoute';

const baseKey = "wugu"
const selectKey = baseKey + "Select"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

const state = reactive({
    rawData: [],
    data: [],
    industryTags: new Set(),
    selected: getSessionStorage(selectKey) || '全部',
    sort: { 
        prop: getSessionStorage(sortPropKey) || '' , 
        order: getSessionStorage(sortOrderKey) || '' 
    }
})

let stocks = useRouteQuery("stocks", "")

getWuguHistoryData().then( res => {
    state.rawData = res.data
    if (stocks) {
        let stocksArr = stocks.split(";")
        state.rawData = state.rawData.filter(item => stocksArr.includes(item.stock))
    }

    state.data = state.rawData
    state.industryTags.add("全部")
    state.rawData.forEach(item => {
        state.industryTags.add(item.industry)
    })

    change()
})

const change = () => {
    if (state.selected === "全部") {
        state.data = state.rawData
    } else {
        state.data = state.rawData.filter(item => item.industry === state.selected)
    }

    setSessionStorage(selectKey, state.selected)
}

const industryClick = (row, column, cell, event) => {
    var columnProperty = column.property
    if (columnProperty == "industry") {
        // 还原
        if (state.selected === row.industry) {
            state.selected = "全部"
        } else {
            state.selected = row.industry
        }
        change()
    }
}
const sortChange = (column, prop, order) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

    var columnProperty = column.property
    if (columnProperty.startsWith('rank')) {
        var wugu = row[columnProperty]
        return getWuguClassName(wugu)
    }

    if (columnProperty === 'increased') {
        var increase = row[columnProperty]
        if (increase > 0) {
            return 'lpgt99-cell'
        }
    }

    return ''
}
</script>

<style>
</style>